<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Beauty Show</title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script>
        tieba_name=null
        imgindex=1
        imgcount=null
        $("document").ready(function(){
            $("#currbtn").click(function(){
                imgindex=$("#index").val()
                if(imgindex>imgcount && imgindex<0)
                {
                    $("#hint").text("超出范围")
                }else{
                    currimg(imgindex)
                }
            });
            $("#prebtn").click(function(){ preimg() });
            $("#nextbtn").click(function(){ nextimg() });
            $("#select").click(function(){
                tieba_name=$("#select").val()
                $.get("ajax",{tieba:tieba_name},function(data){
                    imgcount=data
                    $("#img_count").html("<label>当前选中的贴吧共有："+data+"张（仅本站存储）</label>")
                    currimg(imgindex)
                })
            });
        });

        function showimg(index) {
            imgindex = index
            $.get("geturl", {tieba: tieba_name, index: imgindex}, function (data) {
                $("img").attr('src', data);
            })
            $("#index").val(imgindex)
        }

        function currimg(index)
        {
            showimg(index)
        }

        function preimg()
        {
            if(imgindex<=1)
            {
                $("#hint").text("前方没路了")
                imgindex=1
                showimg(imgindex)
            }else{
                $("#hint").text("")
                imgindex--
                showimg(imgindex)
            }
        }
        function nextimg()
        {
            if(imgindex>=imgcount)
            {
                $("#hint").text("此路不通")
                imgindex=imgcount
                showimg(imgindex)
            }else{
                $("#hint").text("")
                imgindex++
                showimg(imgindex)
            }
        }
    </script>
</head>
<body>
<h1 id="title">Welcome to Beauty Show</h1>
<div id="selection">
    <label>选择一个贴吧：</label>
    <select id="select">
        {% for i in dirc %}
            <option value="{{ i }}">{{ i }}</option>
        {% endfor %}
    </select>
<code id="img_count">当前没有贴吧被选择</code>
</div>
<div id="control_area">
    <label for="index">要显示第几张图片？</label>
    <input type="text" id="index"/>
    <button id="currbtn">显示</button>
    <button id="prebtn">上一张</button>
    <button id="nextbtn">下一张</button>
    <label id="hint" style="color: red"></label>
</div>
<br>
<div id="img_box">
    <img id="img"/>
</div>

</body>
</html>